<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0072)pay.html?selectedItemSpecIds=cake-1004-spec-1 -->
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<meta name="viewport" content="width=device-width, initial-scale=1.0 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>结算页面</title>
		<link rel="shortcut icon" href="img/foodie.ico">

		<link href="static/css/amazeui.css" rel="stylesheet" type="text/css">
		<link href="static/css/demo.css" rel="stylesheet" type="text/css">
		<link href="static/css/cartstyle.css" rel="stylesheet" type="text/css">
		<link href="static/css/jsstyle.css" rel="stylesheet" type="text/css">
		<link href="static/css/lee.css" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="static/js/jquery-1.7.min.js"></script>
		<!-- 引入 layui.css -->
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.5/dist/css/layui.css">
		<!-- 引入 layui.js -->
		<script src="//unpkg.com/layui@2.6.5/dist/layui.js"></script>
	</head>

	<body style="overflow: visible;">
		<div id="container">
			<!--顶部导航条 -->
			<div class="am-container header">
				<ul class="message-l">
					<div class="topMessage">
						<div v-if="isLogin" class="menu-hd">
							{{username}},欢迎您！
						</div>
						<div v-else class="menu-hd">
							<a href="#" target="_top" class="h">亲，请登录</a>
							<a href="#" target="_top">免费注册</a>
						</div>
					</div>
				</ul>
				<ul class="message-r">
					<div class="topMessage home">
						<div class="menu-hd"><a href="index.html" target="_top" class="h">商城首页</a></div>
					</div>
					<div class="topMessage mini-cart">
						<div class="menu-hd"><a id="mc-menu-hd" href="shopcart.html" target="_top"><i class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum" class="h">0</strong></a></div>
					</div>
				</ul>
			</div>

			<!--悬浮搜索框-->
			<div class="nav white">
				<div class="logo"><img src="static/images/logo.png" /></div>
				<div class="logoBig">
					<li><img src="static/images/logo.png" style="height: 80px; width: 100px"/></li>
				</div>
				<div class="search-bar pr">
					<a name="index_none_header_sysc" href="#"></a>
					<form>
						<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
						<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
					</form>
				</div>
			</div>

			<div class="clear"></div>
			
			<div class="concent" style="margin-top: 35px;">
				<div class="paycont">
					<!--<div class="address">
						<h3>确认收货地址 </h3>
						<div class="control selected">
							<div class="tc-btn createAddr theme-login am-btn am-btn-danger">使用新地址</div>
						</div>
						<div class="clear"></div>
						<ul>
							<span style="">
								<template v-for="addr,index in addrs">
									<li :class="{'user-addresslist':true, 'defaultAddr':index==addrIndex}" style="margin-top: 6px;" @click="chooseAddr" :data-index="index">
										<div class="address-left">
											<div class="user DefaultAddr">
												<span class="buy-address-detail">
													<span class="buy-user">{{addr.receiverName}}</span>
													<span class="buy-phone">{{addr.receiverMobile}}</span>
												</span>
											</div>
											<div class="default-address DefaultAddr">
												<span class="buy-line-title buy-line-title-type">收货地址：</span>
												<span class="buy&#45;&#45;address-detail">
													<span class="province">{{addr.province}}</span>
													<span class="city">{{addr.city}}</span>
													<span class="dist">{{addr.area}}</span>
													<span class="street">{{addr.addr}}</span>
												</span>
											</div>
											<ins class="deftip" v-if="addr.commonAddr==1">默认地址</ins>
										</div>
										<div class="address-right">
											<a href="person/address.html"><span class="am-icon-angle-right am-icon-lg"></span></a>
										</div>
										<div class="clear"></div>
										<div class="new-addr-btn">
											<a href="javascript:void(0);" class="hidden">设为默认</a> <span class="new-addr-bar hidden">|</span>
											<a href="javascript:void(0);">编辑</a> <span class="new-addr-bar">|</span>
											<a href="javascript:void(0);">删除</a>
										</div>
									</li>
								</template>
							</span>
						</ul>
						<div class="clear"></div>
					</div>-->
					<div class="logistics">
						<h3>选择支付方式</h3>
						<ul class="pay-list">
							<li style="width: 180px; height: 40px; padding: 3px;"><img src="static/images/weizhifu.jpg" style="width: 170px; height: 34px;"><span></span></li>
							<li style="width: 180px; height: 40px; padding: 3px;"><img src="static/images/zhifubao.jpg" style="width: 170px; height: 34px;"><span></span></li>
						</ul>
					</div>
					<div class="clear"></div>
					<div class="concent">
					<div id="payTable">
						<h3>确认订单信息</h3>
						<div class="cart-table-th">
							<div class="wp">
								<div class="th th-item">
								<div class="td-inner">商品信息</div>
							</div>
								<div class="th th-price">
								<div class="td-inner">单价</div>
							</div>
								<div class="th th-amount">
								<div class="td-inner">数量</div>
							</div>
								<div class="th th-sum">
								<div class="td-inner">金额</div>
							</div>
								<div class="th th-oplist">
								<div class="td-inner">配送方式</div>
							</div>
							</div>
						</div>
						<div class="clear"></div>
						<div class="bundle  bundle-last">
							<template v-for="sc in shopCarts">
								<div class="bundle-main">
									<ul class="item-content clearfix">
										<div class="pay-phone">
											<li class="td td-item">
												<div class="item-pic">
													<a href="item.html?itemId=cake-1004" target="_blank" class="J_MakePoint"><img :src="'static/pimgs/'+sc.productImg" class="itempic J_ItemImg" style="width: 80px; height: 80px;"></a>
												</div>
												<div class="item-info">
													<div class="item-basic-info">
														<a href="item.html?itemId=cake-1004" target="_blank" data-point="tbcart.8.11" class="item-title J_MakePoint">{{sc.productName}} {{sc.skuName}}</a>
													</div>
												</div>
											</li>
											<li class="td td-info">
												<div class="item-props"><span class="sku-line">{{sc.skuProps}}</span></div>
											</li>
											<li class="td td-price">
												<div class="item-price price-promo-promo">
													<div class="price-content"><em class="J_Price price-now">{{sc.sellPrice}}</em></div>
												</div>
											</li>
										</div>
										<li class="td td-amount">
											<div class="amount-wrapper ">
												<div class="item-amount "><span class="phone-title">购买数量</span>
													<div class="sl">{{sc.cartNum}}</div>
												</div>
											</div>
										</li>
										<li class="td td-sum">
											<div class="td-inner"><em tabindex="0" class="J_ItemSum number">{{sc.sellPrice*sc.cartNum}}</em></div>
										</li>
										<li class="td td-oplist">
											<div class="td-inner"><span class="phone-title">配送方式</span>
												<div class="pay-logis">包邮</div>
											</div>
										</li>
									</ul>
									<div class="clear"></div>
								</div>
							</template>
						</div>
						<div class="clear"></div>
					</div>
				</div>
				<div class="clear"></div>
				<div class="pay-total">
					<div class="order-extra">
						<div class="order-user-info">
							<div id="holyshit257" class="memo"><label>买家留言：</label> <input type="text" title="选填, 可写备注" placeholder="选填, 可写备注" class="memo-input J_MakePoint c2c-text-default memo-close">
								<div class="msg hidden J-msg">
									<p class="error">最多输入500个字符</p>
								</div>
							</div>
						</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="buy-point-discharge ">
					<p class="price g_price ">合计（包邮）<em class="pay-sum">¥{{totalPrice}}</em></p>
				</div>
				<div class="order-go clearfix">
					<div class="pay-confirm clearfix">
						<div class="box">
							<div tabindex="0" id="holyshit267" class="realPay"><em class="t">实付款：</em>
								<span class="price g_price ">
									<em id="J_ActualFee" class="style-large-bold-red ">¥{{totalPrice}}</em>
								</span>
							</div>
							<!--<div id="holyshit268" class="pay-address">
								<p class="buy-footer-address"><span class="buy-line-title buy-line-title-type">寄送至：</span>
									<span class="buy&#45;&#45;address-detail">
										<span class="province">{{addrs[addrIndex].province}}</span>
										<span class="city">{{addrs[addrIndex].city}}</span>
										<span class="dist">{{addrs[addrIndex].area}}</span>
										<span class="street">{{addrs[addrIndex].addr}}</span>
									</span>
								</p>
								<p class="buy-footer-address">
									<span class="buy-line-title">收货人：</span>
									<span class="buy-address-detail">
									<span class="buy-user">{{addrs[addrIndex].receiverName}}</span>
									<span class="buy-phone">{{addrs[addrIndex].receiverMobile}}</span>
									</span>
								</p>
							</div>-->
						</div>
						<div id="holyshit269" class="submitOrder">
							<div class="go-btn-wrap">
								<a id="J_Go" href="javascript:void(0);" tabindex="0" @click="addOrder" title="点击此按钮，提交订单" class="btn-go">提交订单</a>
							</div>
						</div>
					</div>
				</div>
				</div>
				<div class="clear"></div>
			</div>
		
			<div class="footer">
				<div class="footer-hd">
					<p>
						<a href="#">锋迷商城</a>
						<b>|</b>
						<a href="#">商城首页</a>
						<b>|</b>
						<a href="#">支付宝</a>
						<b>|</b>
						<a href="#">物流</a>
					</p>
				</div>
				<div class="footer-bd">
					<p>
						<a href="#">关于千锋</a>
						<a href="#">合作伙伴</a>
						<a href="#">联系我们</a>
						<a href="#">网站地图</a>
						<em>©qfedu.com 版权所有</em>
					</p>
				</div>
			</div>
			<div class="theme-popover-mask" style="display: none; height: 763px;"></div>
			<div class="clear"></div>
		</div>
		<script type="text/javascript" src="static/js/utils.js" ></script>
		<script type="text/javascript" src="static/js/cookie_utils.js" ></script>
		<script type="text/javascript" src="static/js/vue.js" ></script>
		<script type="text/javascript" src="static/js/axios.min.js" ></script>
		<script type="text/javascript">
			//引入layer做弹窗提示
			var layer;
			layui.use('layer',function () {
				layer=layui.layer;
			});

			var baseUrl = "http://localhost:8080/haitaobao";
			var vm=new Vue({
				el:"#container",
				data:{
					cartIds:"",
					shopCarts:[],
					totalPrice:0.00,
					cartIdsArr:[],
					isLogin:false,
					username:"",
					token:""
				},
				created:function () {
					//获得username
					var username = getCookieValue("username");
					if (username!=null){
						this.isLogin=true;
						this.username=username;
					}
					this.cartIds=getUrlParam("cids");
					var getShoppingCartUrl=baseUrl+"/shoppingCart/getShoppingCartListByCartIds";
					//根据当前用户id和cartId去查询订单id
					axios({
						url:getShoppingCartUrl,
						method:"post",
						headers: {
							token: "123",
						},
						data:{
							cartIds:this.cartIds,
						}
					}).then((res)=>{
						if (res.data.code==200){
							this.shopCarts=res.data.data;
							for(var i=0; i<this.shopCarts.length; i++){
								this.totalPrice = this.totalPrice + this.shopCarts[i].cartNum * this.shopCarts[i].sellPrice;
								this.cartIdsArr.push(this.shopCarts[i].cartId);
								console.log("order:");
								console.log(this.cartIdsArr);
							}
						}
					})
				},
				methods:{
					addOrder:function () {
						var addOrderUrl=baseUrl+"/order/addOrder";
						//获得userId
						var userId=getCookieValue("userId");
						axios({
							url:addOrderUrl,
							method:"post",
							headers: {
								token: this.token,
							},
							data:{
								userId:userId,
								cartIds:this.cartIdsArr,
							}
						}).then((res)=>{
							if (res.data.code==200){
								layer.msg("提交订单成功");
							}else {
								layer.msg("提交订单失败");
							}
						})
					}
				},
			});
			
		</script>

	</body>

</html>